<template>
  <div class="newcomer-set">
    <el-form ref="elForm" :model="formData" :rules="rules" label-width="110px">
      <title-line title="基本信息" />
      <el-form-item label="新人专区：" prop="isOpen" required>
        <el-radio-group v-model="formData.isOpen">
          <el-radio v-for="(item, index) in TURN_ON_STATUS" :key="index" :label="item.value">{{
            item.label
          }}</el-radio>
        </el-radio-group>
      </el-form-item>

      <div style="position: relative">
        <el-form-item label="购买限制：" prop="limit" required>
          <el-radio-group v-model="formData.limit">
            <el-radio v-for="(item, index) in BUY_LIMIT_STATUS" :key="index" :label="item.value">{{
              item.label
            }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item prop="exchangeTimes" style="position: absolute; left: 210px; top: 0">
          <template v-if="formData.limit">
            <el-input
              class="ml-10"
              v-model.number="formData.exchangeTimes"
              style="width: 200px"
              placeholder="请输入限制购买数量（1-100）"
            />
            <span class="ml-5" style="display: inline-block">次</span>
          </template>
        </el-form-item>

        <el-form-item label="新人专区背景：" prop="backImgUrl" label-width="120px">
          <UploadImage
            :isShowTip="true"
            :lazy="true"
            :file-type="['jpg', 'png', 'jpeg']"
            file-pixel="414*763"
            :file-size="1"
            @on-change="uploadChange"
            v-model="formData.backImgUrl"
          />
        </el-form-item>
        <title-line title="新人专区规则介绍" />
        <el-form-item label-width="0">
          <Tinymce v-model="formData.content" />
        </el-form-item>
        <el-form-item class="text-center">
          <el-button @click="resetForm"> 返回 </el-button>
          <el-button @click="submitForm" type="primary"> 保存 </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { TURN_ON_STATUS, BUY_LIMIT_STATUS } from '@/enum'
export default {
  name: 'NewcomerSet',
  data() {
    return {
      formData: {
        isOpen: false,
        backImgUrl: '',
        content: '',
        limit: 0,
        exchangeTimes: 1
      },
      rules: {
        backImgUrl: [
          {
            required: true,
            message: '请上传新人专区背景',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  computed: {
    // 新人专区
    TURN_ON_STATUS() {
      return TURN_ON_STATUS
    },
    // 购买限制
    BUY_LIMIT_STATUS() {
      return BUY_LIMIT_STATUS
    }
  },
  watch: {
    'formData.limit'(value) {
      if (!value) {
        delete this.rules.exchangeTimes
        this.$refs.elForm.clearValidate('exchangeTimes')
      } else {
        this.rules = Object.assign({}, this.rules, {
          exchangeTimes: [
            {
              required: true,
              message: '请输入限制次数',
              trigger: 'blur'
            },
            {
              pattern: /^[1-9]{1,2}$|100$/,
              message: '请输入1-100之间的正整数'
            }
          ]
        })
        console.log(this.rules)
      }
    }
  },
  created() {
    this.getActivityConfig()
  },
  methods: {
    // 获取配置
    async getActivityConfig() {
      const { data } = await this.$http.coupon.setApi.getActivityConfig({ type: 10 })
      for (const key in data) {
        this.formData[key] = data[key]
      }
      this.formData.limit = this.formData.exchangeTimes > 0 ? 1 : 0
    },
    uploadChange() {
      if (this.formData.backImgUrl) {
        this.$refs.elForm.validateField('backImgUrl')
      }
    },
    // 确定
    submitForm() {
      this.$refs['elForm'].validate(async valid => {
        if (!valid) return
        const params = {
          type: 10,
          ...this.formData
        }
        if (this.formData.limit === 0) params.exchangeTimes = 0
        delete params.limit
        const { status, msg } = await this.$http.coupon.setApi.updatedActivityConfig(params)
        if (status === 200) {
          this.$message.success('保存成功！')
          this.getActivityConfig()
        } else {
          this.$message.error(msg)
        }
      })
    },
    // 重置表单
    resetForm() {
      this.$refs['elForm'].resetFields()
      this.$router.back(-1)
    }
  }
}
</script>

<style lang="scss" scoped></style>
